<template>
  <a-drawer
    v-bind="$attrs"
    v-on="$listeners"
    :visible="show"
    :afterVisibleChange="afterVisibleChange"
    :wrapClassName="className"
  >
    <template v-if="slotArr.length > 0">
      <template v-for="slot in slotArr" :slot="slot">
        <slot :name="slot"></slot>
      </template>
    </template>
    <slot v-else></slot>
  </a-drawer>
</template>
<script>
import { maccApi, requestHttp } from '@utils/index';
export default {
  name: 'componentName',
  props: {
    visible: {
      typeof: Boolean,
      default: false,
    },
    wrapClassName: {
      typeof: String,
    },
  },

  data() {
    return {
      show: this.visible,
      slotArr: [],
      className: 'rj-drawer',
    };
  },
  mounted() {
    this.slotArr = Object.keys(this.$slots);
    if (this.wrapClassName) {
      this.className = `${this.wrapClassName} ${this.className}`;
    }
  },

  destroyed() {
    if (self == top) return; //页面没有被内嵌
    this.setParentsClass();
  },

  components: {},

  watch: {
    visible: {
      handler: function (val) {
        this.show = val;
        if (val) {
          if (self != top) {
            top.$('body').addClass('subWebDrawer');
          }
        } else {
          this.setParentsClass();
        }
      },
      immediate: true,
    },
  },

  methods: {
    setParentsClass() {
      this.$nextTick(() => {
        let hasShowModal = false,
          hasShowDrawer = false;
        const modalArr = document.querySelectorAll('.rj-modal .ant-modal-wrap');

        modalArr.forEach(function (item) {
          //判断是否没有显示的弹窗
          var style = window.getComputedStyle(item);
          if (style.display !== 'none') {
            hasShowModal = true;
          }
        });
        if (!hasShowModal) {
          //有可能弹窗中触发显示弹窗，造成多个弹窗，需要判断只有一个弹窗是才设置
          if (self != top) {
            top.$('body').removeClass('subWebModal');
          }
        } else {
          if (self != top) {
            top.$('body').addClass('subWebModal');
          }
        }
        const drawerArr = document.querySelectorAll('.rj-drawer');
        drawerArr.forEach(function (item) {
          //判断是否没有显示的抽屉弹窗
          const style = window.getComputedStyle(item);
          if (style.display !== 'none' && style.width != '0px') {
            hasShowDrawer = true;
          }
        });
        if (!hasShowDrawer) {
          //有可能弹窗中触发显示弹窗，造成多个弹窗，需要判断只有一个弹窗是才设置
          if (self != top) {
            top.$('body').removeClass('subWebDrawer');
          }
        } else {
          if (self != top) {
            top.$('body').addClass('subWebDrawer');
          }
        }
      });
    },
    afterVisibleChange(val) {
      // this?.$attrs?.afterVisibleChange();
      this.$attrs.afterVisibleChange && this.$attrs.afterVisibleChange(val);
      this.setParentsClass();
    },
  },
};
</script>

<style lang="less" scoped></style>
